<template>
  <div class="app-container">
    <div class="search-bar">
      <!--多条件查询表单-->
      <el-form :inline="true" class="demo-form-inline" size="mini">
        <el-form-item label="井号">
          <el-input
            v-model="searchData.expapp_wellname"
            clearable
            placeholder="请输入井号"
            style="width: 130px"
          />
        </el-form-item>

        <el-form-item label="作业区">
          <el-select
            v-model="searchData.expapp_areano"
            clearable
            filterable
            placeholder="请选择作业区"
            style="width: 130px"
          >
            <el-option
              v-for="(item, i) in opeArea"
              :key="i"
              :label="item"
              :value="item"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="作业区审批状态">
          <el-select
            v-model="searchData.expapp_areastate"
            clearable
            placeholder="请选择审批状态"
            style="width: 130px"
          >
            <el-option label="未审批" value="0" />
            <el-option label="作业区审批未通过" value="1" />
            <el-option label="作业区审批通过" value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="工艺所审批状态">
          <el-select
            v-model="searchData.expapp_creaftstate"
            clearable
            placeholder="请选择审批状态"
            style="width: 130px"
          >
            <el-option label="未审批" value="0" />
            <el-option label="工艺所审批未通过" value="1" />
            <el-option label="工艺所审批通过" value="2" />
          </el-select>
        </el-form-item>
          <el-form-item label="日期">
            <el-date-picker
              v-model="searchData.startTime"
              placeholder="选择开始时间"
              value-format="yyyy-MM-dd"
              type="date"
              style="width: 150px"
            />
          </el-form-item>
          <el-form-item>
            <el-date-picker
              v-model="searchData.endTime"
              placeholder="选择截止时间"
              value-format="yyyy-MM-dd"
              type="date"
              style="width: 150px"
            />
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              @click="search()"
            >查询</el-button>
            <el-button type="default" @click="reset()">清空</el-button>
            <el-button
              type="primary"
              icon="el-icon-search"
              @click="add"
            >新增</el-button>
          </el-form-item>
      </el-form>
    </div>

    <div class="content">
      <el-table
        :data="tableData"
        :header-cell-style="{height:'30px',padding:'0px',fontSize:'14px'}"
        style="width: 100%;font-size: 13px"
        :row-style="{height:'20px'}"
        :cell-style="{padding:'1px'}"
        border
        fit
        stripe
        height="700"
        highlight-current-row
        element-loading-text="数据加载中"
      >
        <el-table-column
          prop="date"
          label="序号"
          width="70"
          align="center"
          fixed
        >
          <template slot-scope="scope">
            {{ (page - 1) * limit + scope.$index + 1 }}
          </template>
        </el-table-column>

        <el-table-column
          fixed
          prop="expapp_wellname"
          label="井号"
          sortable
          width="80"
          align="center"
        />

        <el-table-column
          prop="expapp_areano"
          label="申请单位"
          sortable
          width="120"
          align="center"
        />

        <el-table-column label="正常生产情况" align="center">
          <el-table-column
            prop="expapp_normaldailyliquid"
            label="日产液量（T）"
            sortable
            width="140"
            align="center"
          />
          <el-table-column
            prop="expapp_normalwatercontent"
            label="含水（%）"
            sortable
            width="120"
            align="center"
          />
          <el-table-column
            prop="expapp_normalpumpcondition"
            label="泵况"
            width="80"
            align="center"
          />
          <el-table-column
            prop="expapp_normalsunkenness"
            label="沉没度（m）"
            width="110"
            align="center"
          />
        </el-table-column>

        <el-table-column label="异常生产情况" align="center">
          <el-table-column
            prop="expapp_expdailyliquid"
            label="日产液量（T）"
            sortable
            width="140"
            align="center"
          />
          <el-table-column
            prop="expapp_expwatercontent"
            label="含水（%）"
            width="120"
            sortable
            align="center"
          />
          <el-table-column
            prop="expapp_exppumpcondition"
            label="泵况"
            width="80"
            align="center"
          />
          <el-table-column
            prop="expapp_expsunkenness"
            label="沉没度（m）"
            width="110"
            align="center"
          />
        </el-table-column>

        <el-table-column
          prop="expapp_lastinspectdata"
          label="最后一次检泵日期"
          width="160"
          sortable
          align="center"
        />

        <el-table-column
          prop="expapp_sitecheck"
          label="诊断原因"
          width="150"
          align="center"
        />

        <el-table-column label="申请异常热洗" align="center">
          <el-table-column
            prop="expapp_applicationpersonid_name"
            label="申请人"
            width="80"
            align="center"
          />
          <el-table-column
            prop="expapp_applicationdata"
            label="申请时间"
            width="120"
            align="center"
          />
        </el-table-column>

        <el-table-column label="本次用液量及热洗温度要求" align="center">
          <el-table-column
            prop="expapp_amountofliquid"
            label="用液量（m3）"
            width="120"
            align="center"
          />

          <el-table-column label="前置量" align="center">
            <el-table-column
              prop="expapp_preload"
              label="前置量（m3）"
              width="120"
              align="center"
            />
            <el-table-column
              prop="expapp_preloadupperlimit"
              label="温度上限（℃）"
              width="120"
              align="center"
            />
            <el-table-column
              prop="expapp_preloadlowlimit"
              label="温度下限（℃）"
              width="120"
              align="center"
            />
          </el-table-column>

          <el-table-column label="热洗量" align="center">
            <el-table-column
              prop="expapp_hotwashload"
              label="热洗量（m3）"
              width="120"
              align="center"
            />
            <el-table-column
              prop="expapp_hotwashupperlimit"
              label="温度上限（℃）"
              width="120"
              align="center"
            />
            <el-table-column
              prop="expapp_hotwashlowlimit"
              label="温度下限（℃）"
              width="120"
              align="center"
            />
          </el-table-column>

          <el-table-column label="顶替量" align="center">
            <el-table-column
              prop="expapp_replaceload"
              label="顶替量（m3）"
              width="120"
              align="center"
            />
            <el-table-column
              prop="expapp_replaceloadupperlimit"
              label="温度上限（℃）"
              width="120"
              align="center"
            />
            <el-table-column
              prop="expapp_replaceloadlowlimit"
              label="温度下限（℃）"
              width="120"
              align="center"
            />
          </el-table-column>
        </el-table-column>

        <el-table-column label="作业区审批" align="center">
          <el-table-column
            prop="expapp_approvalcomment"
            label="意见"
            width="150"
            :show-overflow-tooltip="true"
            align="center"
          />
          <el-table-column
            prop="expapp_areadirectorid"
            label="审批人"
            width="80"
            align="center"
          />
          <el-table-column
            prop="expapp_approvaldata"
            label="审批时间"
            width="120"
            align="center"
          />
        </el-table-column>

        <el-table-column label="工艺所审批" align="center">
          <el-table-column
            prop="expapp_craftopinoin"
            label="意见"
            width="150"
            :show-overflow-tooltip="true"
            align="center"
          />
          <el-table-column
            prop="expapp_areadirectorid"
            label="审批人"
            width="80"
            align="center"
          />
          <el-table-column
            prop="expapp_craftdata"
            label="审批时间"
            width="120"
            align="center"
          />
        </el-table-column>

        <el-table-column label="操作" width="130" align="center" fixed="right">
          <template slot-scope="scope">
            <el-link
              type="primary"
              :underline="false"
              style="margin-right: 5px"
              :disabled="
                (scope.row.expapp_areastate == '2' &&
                  $store.state.user.userInfo.userType != '3' &&
                  $store.state.user.userInfo.userType != '4') ||
                  (scope.row.expapp_creaftstate == '2' &&
                    $store.state.user.userInfo.userType != '4') ||
                  (scope.row.expapp_areastate != '2' &&
                    $store.state.user.userInfo.userType == '3')
              "
              @click="modify(scope.row)"
            >修改</el-link>
            <el-link
              v-if="$store.state.user.userInfo.userType != '1'"
              type="danger"
              :underline="false"
              style="margin-right: 5px"
              @click="del(scope.row.expapp_id)"
            >删除</el-link>
            <el-link
              type="success"
              :underline="false"
              style="margin-right: 5px"
              @click="check(scope.row)"
            >查看</el-link>
          </template>
        </el-table-column>
      </el-table>

      <!--分页组件-->
      <Pagination
        :page.sync="page"
        :limit.sync="limit"
        :total="total"
        @changePage="getListPage1(arguments)"
        @size-change="handleSizeChange"
      />
    </div>
    <Insert :show-dialog.sync="showDialog" :readonly="readonly" :form="info" />
  </div>
</template>

<script>
import Pagination from '@/components/pagination.vue'
import Insert from './components/abnormalInsertApply.vue'

export default {
  name: 'ErrorApplication',
  components: { Pagination, Insert },

  data() {
    return {
      drawer: false,
      innerDrawer: false,
      searchData: {},
      downloadLoading: false,

      opeArea:['第一采油作业区','第二采油作业区', '第三采油作业区','第五采油作业区','第七采油作业区','第八采油作业区','第九采油作业区','运行维护一中心'],
      page: 1,
      limit: 30,
      total: 0,
      showDialog: false,
      readonly: false,
      info: {},

      showApproval: false,
      approvalData: {},
      approvalRules: {
        expApp_areaState: {
          required: true,
          message: '请输入必填项',
          trigger: 'change'
        },
        expApp_approvalComment: {
          required: true,
          message: '请输入必填项',
          trigger: 'blur'
        },
        expApp_creaftState: {
          required: true,
          message: '请输入必填项',
          trigger: 'change'
        },
        expApp_craftOpinoin: {
          required: true,
          message: '请输入必填项',
          trigger: 'blur'
        }
      },
      showCraft: false,

      tableData: []
    }
  },
  watch: {
    showDialog(val) {
      if (!val) this.getListPage(this.page, this.limit, this.searchData)
    }
  },

  created() {
    this.getListPage(this.page, this.limit)
  },

  methods: {
    getListPage(pageNum, pageSize, data) {
      this.$http
        .post('/expHotwashapplica/pageQuery', {
          pageNum,
          pageSize,
          data: { ...data }
        })
        .then(({ data: { data: res }}) => {
          this.tableData = res.records
          this.total = res.total
        })
        .catch((err) => {
          this.$message.error(err)
        })
    },
    getListPage1(msg){
      let pageNum=msg[0]
      let pageSize=msg[1]
      let data=this.searchData
      this.$http.post('/expHotwashapplica/pageQuery', { pageSize, pageNum, data }).then(({ data: { data: res }}) => {
        this.tableData = res.records
        this.total = res.total
      })
    },
    //每页记录数变动
    handleSizeChange(size){
      let pageSize=this.page
      let pageNum=size
      let data=this.searchData
      this.$http.post('/expHotwashapplica/pageQuery', { pageSize, pageNum, data }).then(({ data: { data: res }}) => {
        this.tableData = res.records
        this.total = res.total
      })
    },
    changePage(pageNum, pageSize) {
      this.getListPage(pageNum, pageSize, this.searchData)
    },
    search() {
      this.page = 1
      this.getListPage(this.page, this.limit, this.searchData)
    },
    reset() {
      this.searchData = {}
    },
    add() {
      this.showDialog = true
      this.expapp_id = null
      this.info = {}
      this.readonly = false
    },
    modify(data) {
      this.info = data
      this.showDialog = true
      this.readonly = false
    },
    approval(id) {
      this.showApproval = true
      this.expapp_id = id
    },
    craft(id) {
      this.showCraft = true
      this.expapp_id = id
    },
    del(id) {
      this.$confirm('确定删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$http
            .post('/expHotwashapplica/delete', { id })
            .then(() => {
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
              this.getListPage(this.page, this.limit, this.searchData)
            })
            .catch((err) => {
              this.$message.error(err)
            })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    check(data) {
      this.showDialog = true
      this.info = data
      this.readonly = true
    },
    submitApproval() {
      this.$refs.approval.validate((valid) => {
        if (valid) {
          this.$http
            .post('/expHotwashapplica/areaApproval', {
              id: this.expapp_id,
              ...this.approvalData
            })
            .then(() => {
              this.$message.success('提交成功')
              this.closeApproval()
            })
            .catch((err) => {
              this.$message.error(err)
              this.closeApproval()
            })
        }
      })
    },
    submitCraft() {
      this.$refs.craft.validate((valid) => {
        if (valid) {
          this.$http
            .post('/expHotwashapplica/craftApproval', {
              id: this.expapp_id,
              ...this.approvalData
            })
            .then(() => {
              this.$message.success('提交成功')
              this.closeApproval()
            })
            .catch((err) => {
              this.$message.error(err)
              this.closeApproval()
            })
        }
      })
    },
    closeApproval() {
      this.showApproval = false
      this.approvalData = {}
      this.showCraft = false
    },
    useExportUtil() {}
  }
}
</script>

<style scoped>
.overflowAuto {
  overflow-y: auto;
  position: absolute;
  width: 100%;
  height: 100%;
}
.overflowAuto::-webkit-scrollbar {
  height: 6px;
  width: 6px;
}
.overflowAuto::-webkit-scrollbar-thumb {
  background: rgb(224, 214, 235);
}
</style>
